{extend name="public/base"/}
{block name="style"}
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/index.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/style.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/all_header.css" />
	<style>
		*{margin:0;padding:0;}
		body{max-width:768px;margin:auto;background:#fafafa}
		.table_all{display:table;width:100%;margin:auto;}
		.cell_all{display:table-cell}
		.row_all{display:table-row}
		.box_all{
			display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox;      /* TWEENER - IE 10 */
			display: -webkit-flex;     /* NEW - Chrome */
			display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
			flex-flow: row wrap;
		}
		.wap_user{width:40px;
			height:40px;
		}

		.font-16{font-size:16px}
		.font-18{font-size:18px;}
		.font_20{font-size:20px}
		.font_28{font-size:28px}
		.font_33{font-size:33px;}
		.Money_button {
			width: 180px;
			height: 45px;
			background: #44B549;
			line-height: 45px;
			color: #fff;
			border-radius: 5px;
			display: block;
			clear: both;
			text-align: center;
			margin: 0 auto;
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 25px;
			border:none;
		}
		.footer{margin:auto;padding-top:15px;background:#fff;min-height:140px;border-top:5px solid #eee;}
		.footer a{color:#000;
			font-size:12px;width:100%;
			display:inline-block;
			/*font-size:12px;height:1em;line-height:1em;*/
		}
		.footer .auto li{width:calc( 100%/5 - 2px );text-align:center;}
		.footer .auto{margin:auto; border-bottom:1px solid #eee;padding-bottom:15px;}
		.center{text-align:center}
		/*li[class="cursor"]{border-right:1px solid #ccc;}*/
		.copy{margin:auto;width:100%;
			text-align: justify;
			font-size: 0;
			display:table;
		}
		.copy1{text-align:center;}
		.copy1 span{
			background:#008eea;
			color:#fff;
			width:30px;height:30px;line-height:30px;
			text-align:center;
			box-shadow:5px 5px 5px #bbb;
			border-radius:5px;
			display:inline-block;margin:10px 3px;
		}
		.copy li{
			line-height:30px;
			display: inline-block;
			text-align:center;
			width:25%;margin:0;
		}
		.a_boxr{border:solid #eee;border-width:0px 1px 1px 0px;}
		.a_box1{border:solid #eee;border-width:1px 1px 1px 1px }
		.a_box2{border:solid #eee;border-width:1px 1px 1px 0px;}
		.a_box3{border:solid #eee;border-width:0px 1px 1px 1px;}
		.copy li a{font-size:12px;margin:0;}

		.footer-pub{
			text-align: center;
			margin: auto;
			padding: 15px 0 20px 0;
		}
		.footer-pub a{
			border-right: 1px solid #4d4d4d;
			padding: 0 20px;
			font-size: 10px;
			color: #4d4d4d;
		}
	</style>


<style>
	.bookrack{
		width: 96%;
		margin: 10px auto 60px auto;
	}
	.bookrack li{
		text-align: center;
		/* border-bottom: 1px solid #e8e8e8; */
		background: rgba(255, 255, 255, 0.08);
		width: 28%;
		display: inline-block;
		position: relative;
		margin: 10px 2%;
	}
	.bookrack li img{
		width: 100%;
	}
	.book-name{
		margin-top: 5px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.book-update{
		text-align: center;
		/* margin-left: 94px; */
		position: absolute;
		/* display: block; */
		width: 100%;
		z-index: 200;
		bottom: 21px;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		color: #fff;
		font-size: 12px;
	}
	.book-update marquee {
		margin: 3px 0;
	}
	.book-pic{
		width: 100%;
	}
	.tab-foot{
		color: #2e2e2e;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: rgb(255, 255, 255);
		border-top: 1px solid #f1f1f1;
		z-index: 1001;
		height: 50px;
		display: flex;
	}
	.foot-li{
		font-size: 12px;
		display: inline-block;
		width: 24%;
		text-align: center;
		padding: 5px 0;
		color: #5c5c5c;
		flex:0.2;
	}
	.foot-li span{
		display: inline-block;
		width: 22px;
		height: 22px;
		text-align: center;
		background-size: 100%;
		margin-bottom: 4px;
	}
	.foot-li p{
		font-size: 12px;
	}
	.icon-1{
		background:url(/public/static/images/home_b.png) no-repeat center center;
	}
	.icon-2{
		background:url(/public/static/images/bookrack_b_2.png) no-repeat center center;
	}
	.icon-3{
		background:url(/public/static/images/person_b_1.png) no-repeat center center;
	}
	.icon-4{
		background:url(/public/static/images/sign-foot.png) no-repeat center center;
	}
	.icon-5{
		background:url(/public/static/images/rechange_b_1.png) no-repeat center center;
	}
	.add_color{
		color: #ffb85d;
	}
	.tab-nav{
		display: flex;
		background: #fff;
	}
	.tab-top{
		display: table;
		width: 70%;
		border-collapse: separate;
		border-spacing: 5px 12px;
		text-align: center;
		line-height: 2em;
		border-bottom: 2px solid rgba(255, 184, 93, 0.3);
	}
	.tab-book{
		font-size: 20px;
		color:#ffb85d;
		font-weight: bold;
	}
	.tab-read{
		display: table-cell;
		color: gray;
	}
	.tab-editor{
		display: inline-block;
		height: 26px;
		line-height: 26px;
		font-size: 12px;
		width: 54px;
		text-align: center;
		background: #ffb85d;
		box-shadow: 1px 1px 1px #b07e3e;
		color: #fff;
		margin: 18px 18px 18px 50px;
		flex: 1;
		border-radius: 3px;
	}
	.book-delete{
		position: absolute;
		background: rgba(44, 34, 34, 0.5);
		/*display: inline-block;*/
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 500;
		display: none;
	}
	.book-delete span{
		margin-top: 55%;
		display: inline-block;
		width: 40px;
		height: 40px;
		text-align: center;
		background-size: 100%;
		background: url(/public/static/images/delete.png) no-repeat center center;
	}
	.delete-all{
		text-align: center;
		color: #ffb85d;
		background: rgba(255, 233, 204, 0.5);
		padding: 10px;
		margin-bottom: 5px;
		display: none;
	}
	.delete-all span{
		display: inline-block;
		width: 16px;
		height: 16px;
		text-align: center;
		background-size: 100%;
		background: url(/public/static/images/delete-all.png) no-repeat center center;

	}
	.delete-all p{
		display: inline-block;
		vertical-align: text-top;
	}
	.read-nearly{
		position: relative;
	}
	.nearly-bg{
		width: 100%;
		height: 175px;
		-webkit-filter: blur(4px);
		-moz-filter: blur(4px);
		-o-filter: blur(4px);
		-ms-filter: blur(4px);
		filter: blur(10px);
	}
	.nearly-bg img{
		width: 100%;
		height: 100%;
		background-size: cover;
	}
	.nearly-bd {

	}
	.bd-outer{
		position: absolute;
		top: 0;
		/* margin: 10px; */
		width: 100%;
		height: 180px;
		background: rgba(0, 0, 0, 0.5);
	}
	.nearly-pic{
		width: 100px;
		display: inline-block;
		float: left;
		margin: 12px;
	}
	.nearly-pic img{
		width: 100%;
	}
	.nearly-text{
		color: #ddd;
		padding-right: 8px;
	}
	.nearly-text h3{
		padding-top: 20px;
	}
	.nearly-text p{
		margin-top: 28px;
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.go-read{
		float: right;
		margin: 40px 20px;
		display: inline-block;
		background: #ffb85d;
		width: 95px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 3px;
		box-shadow: 1px 1px 1px #b07e3e;
		color: #fff;
	}
.link{
	position: absolute;
	background: rgba(255, 255, 255, 0);
	/* display: inline-block; */
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 300;
}
	.no-book{
		margin-bottom: 50px;
		position: relative;
	}
	.no-book a{
		position: absolute;
		background: rgba(255, 255, 255, 0);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 300;
		display: inline-block;
	}
	.recommend{
	}
	.recommend-head{
		position: relative;
		border-bottom: 1px solid #cccccc;
		margin: 0 10px;
	}
	.recommend-head h2{
		position: absolute;
		top: -10px;
		left: 40%;
		display: inline-block;
		width: 20%;
		background: #fff;
		color: #ffb85d;
		text-align: center;
	}
	.pointer-events{
		pointer-events:none;
	}
</style>


{/block}

{block name="body"}
	<div class="info_nav">
  <a  href="javascript:history.back(-1)" class="icon"><i class="icon iconfont icon-jiantou1 font_28"></i></a>
  <span class="text">我的书架</span>
  <a href="/" class="icon font-14">首页</a>
  <a href="{:url('books/booksfav')}" class="icon font-14">书架</a>
  		<a href="{:url('user/index')}" class="icon-w45">
				<img src="http://q.qlogo.cn/qqapp/101376496/022418C8445A92F58AA8687491256075/100" /> 
		 
		</a>
</div>
<div class="container">
<div class="tab-nav">
	<div class="tab-top">
		<a href="{:url('books/booksfav')}" class="tab-book">我的书架</a>
		<a href="{:url('books/footprint')}" class="tab-read">阅读记录</a>
		</div>
	<a class="tab-editor">编辑</a>
	</div>
<div class="tab-content clearfix overflow" id="con1" style="background: #fff;">
  <div class="tab-con" style=" float:left; width:100%;">
	  
	  <ul class="bookrack" id="bookrack">
		{volist name="bookcase" id="vo"}
		  	<li>
			  <div class="book-delete" data-book="{$vo.articleid}"><span></span></div>
			  <div class="book-pic"><img src="{$vo.cover|get_cover=###,'path'}"/></div>
			  <p class="book-name">{$vo.articlename}</p>
			  <div class="book-update">
				  <marquee width=105 behavior=scroll direction=left align=middle scrollamount="5">更新至：{$vo.chaptername} </marquee>
				  <marquee width=105 behavior=scroll direction=left align=middle scrollamount="5">更新于:{$vo.chapterupdate_time|date='Y-m-d H:i:s',###}</marquee>
			  </div>
			  <a class="link" href="/books/{$vo.articleid}.html"></a>
		  </li>
		{/volist}
		</ul>

  </div>
</div>

<div class="no-book" style="display: none">
	<img src="/public/static/images/talk_2.png" style="width: 100%">
	<a href="/"></a>
</div>
<div class="recommend" style="display: none">
	<div class="recommend-head"><h2>编辑推荐</h2></div>
	<ul class="bookrack">
			</ul>

</div>
<div class="shoucang">
	<!--<span>已收藏</span><span class="cl_red abs">1</span><span>本书</span>-->
	<a href="javascript:;" id="toggle" target="_self" class="compile" style="display:none">编辑</a>
</div>
</div>
<div class="tab-foot">
        <a href="/" class="foot-li">
            <span class="icon-1"></span>
            <p>首页</p>
        </a>
        <a href="{:url('user/pay')}" class="foot-li">
            <span class="icon-5"></span>
            <p>充值</p>
        </a>
        <a href="{:url('books/booksfav')}" class="foot-li">
            <span class="icon-2"></span>
            <p class="add_color">书架</p>
        </a>
        <a href="{:url('user/index')}" class="foot-li">
            <span class="icon-3"></span>
            <p>我的</p>
        </a>
    </div>

{/block}

{block name="script"}
	<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.cookie.js"></script>

<script type="text/javascript" src="__PUBLIC__/static/js/com.js"></script>

<script type="text/javascript" >
	$(function(){
	$(".tab-editor").click(function() {
		var del = $("#bookrack li");
		if($(".tab-editor").text()=="编辑"){
			$(".tab-editor").text("完成");
			$(".delete-all").css("display","block");
			for(var i=0;i<del.length;i++){
				del.eq(i).find(".book-delete").css("display","inline-block")
			}
		}else{
			$(".tab-editor").text("编辑");
			$(".delete-all").css("display","none");
			for(var j=0;j<del.length;j++){
				del.eq(j).find(".book-delete").css("display","none")
			}
		}
		if(del.length==0){
			$(".tab-editor").text("编辑");
			$(".delete-all").css("display","none");
			$(".tab-editor").addClass("pointer-events");
		}
	});
	$(".book-delete").click(function() {
		var book_id = $(this).attr("data-book");
		var obj = $(this);
        jQuery.ajax({
          url: '/index/books/bookcase/auto/1',
          dataType:"json",
          type: 'post',
          data: {'book_id':book_id},
          success: function(data)
          {
           obj.parent().remove();
			  show_nothing()
          },
          fail: function(){
            Alert.show3sMsg('error');
          }
        });
		});
	})
	function show_nothing(){
		var del = $("#bookrack li");
		if(del.length==0){
			$(".tab-editor").text("编辑");
			$(".delete-all").css("display","none");
			$(".tab-editor").addClass("pointer-events");
			$(".no-book").css("display","block");
			$(".recommend").css("display","block");
		}
	}


</script>

{/block}